import React from 'react';
import {connect} from 'dva';
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card} from 'antd';
import {history} from 'umi';
import {Pagination} from 'antd';
import styles from './index.less'
import {Row, Col} from 'antd';
import ProList from '@ant-design/pro-list';
import {FieldTimeOutlined} from '@ant-design/icons';
import moment from 'moment';

const IconText = ({icon, text}) => (
  <span>
    {React.createElement(icon, {style: {marginRight: 8}})}
    {text}
  </span>
);

@connect(({topics}) => ({topics}))

export default class Topics extends React.Component {
  componentDidMount() {
    this.props.dispatch({type: 'topics/fetchTopics'})
  };

  onSearch(value) {
    this.props.dispatch({
      type: 'topics/overrideStateProps',
      payload: {title: value}
    });
    this.props.dispatch({type: 'topics/fetchTopics'})
  };

  showTotal(total) {
    return `共 ${total} 条 `;
  }

  itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  }

  onPanelChange(value, mode) {
    // eslint-disable-next-line no-console
    console.log(value, mode);
  }

  onChange(pages, pageSize) {
    this.props.dispatch({
      type: 'topics/overrideStateProps',
      payload: {page: pages, size: pageSize}
    });
    this.props.dispatch({type: 'topics/paginationTopics'})
  }


  render() {
    const {topics} = this.props;
    return (
      <PageHeaderWrapper title={false}>
        <Row type="flex" justify="center" gutter={16}>
          <Col span={14}>
            <Card>
              <ProList
                itemLayout="vertical"
                rowKey="id"
                split={true}
                dataSource={topics.topics.list}
                metas={{
                  title: {
                    render: (text, record) => {
                      return (
                        <div onClick={() => history.push(`/topics/${record.id}/`)}>
                          {record.title}
                        </div>
                      )
                    }
                  },
                  // 简介
                  description: {
                    dataIndex: 'excerpt'
                  },
                  actions: {
                    render: (text, record) => [
                      <IconText icon={FieldTimeOutlined} text={`${moment(record.create_time).format('YYYY-MM-DD')}`} key="list-vertical-star-o"/>
                    ],
                  },
                }}
              />
            </Card>
            {/* 翻页 */}
            <Card className={styles.pag}>
              <Pagination defaultCurrent={1} showTotal={this.showTotal.bind(this)} total={topics.topics.total}
                          showSizeChanger
                          showQuickJumper onChange={this.onChange.bind(this)}/>
            </Card>
          </Col>
        </Row>

      </PageHeaderWrapper>

    )
  };
}
